<template>
  <div class="flex-1 bg-white/80 backdrop-blur-sm shadow-lg border border-gray-200/50 overflow-hidden">
    <!-- 加载状态 -->
    <div v-if="_loading" class="h-full flex items-center justify-center">
      <div class="flex flex-col items-center">
        <div class="relative mb-4">
          <div class="w-12 h-12 border-4 border-gray-200 border-t-indigo-500 rounded-full animate-spin" />
          <div class="absolute inset-0 w-12 h-12 border-4 border-transparent border-r-purple-400 rounded-full animate-spin animate-reverse" style="animation-delay: 0.5s;" />
        </div>
        <p class="text-lg font-medium text-gray-700">加载题目中...</p>
      </div>
    </div>
    
    <div v-else-if="topic" class="h-full flex flex-col">
      <!-- 题目导航栏 -->
      <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <button 
              class="group flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg hover:bg-white/30 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
              :disabled="currentIndex <= 0"
              @click="$emit('previousTopic')"
            >
              <svg class="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
              </svg>
              上一题
            </button>
            
            <div class="flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg">
              <span class="text-sm font-medium">{{ currentIndex + 1 }} / {{ totalCount }}</span>
            </div>
            
            <button 
              class="group flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg hover:bg-white/30 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
              :disabled="currentIndex >= totalCount - 1"
              @click="$emit('nextTopic')"
            >
              下一题
              <svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </button>
          </div>
          
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-white rounded-full" />
            <span class="text-sm font-medium">题目详情</span>
          </div>
        </div>
      </div>

      <!-- 题目内容区域 -->
      <div class="flex-1 overflow-y-auto p-8">
        <!-- 题目标题和基本信息 -->
        <div class="mb-8">
          <h1 class="text-4xl font-bold text-gray-900 mb-6 leading-tight">{{ topic.title }}</h1>
          <div class="flex flex-wrap items-center gap-6 text-sm">
            <div class="flex items-center gap-2">
              <span class="font-semibold text-gray-700">难度:</span>
              <span :class="getDifficultyClass(topic.difficulty)">
                {{ topic.difficulty }}
              </span>
            </div>
            <div class="flex items-center gap-2">
              <span class="font-semibold text-gray-700">提交者:</span>
              <span class="text-indigo-600 hover:underline cursor-pointer font-medium">{{ topic.submitter?.username || '未知用户' }}</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="font-semibold text-gray-700">提交时间:</span>
              <span class="text-gray-600">{{ new Date(topic.createdAt).toLocaleDateString() }}</span>
            </div>
          </div>
        </div>

        <!-- 题目内容 -->
        <div class="mb-8">
          <div class="bg-gradient-to-br from-gray-50/80 to-blue-50/80 p-6 rounded-2xl border border-gray-200/50 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
                <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
              </div>
              <h3 class="text-xl font-bold text-gray-900">题目描述</h3>
            </div>
            <div class="prose prose-lg max-w-none text-gray-900 leading-relaxed" v-html="topic.description || '暂无描述'" />
          </div>
        </div>

        <!-- 标准答案 -->
        <div class="mb-8">
          <div class="bg-white rounded-2xl border border-gray-200/50 shadow-sm overflow-hidden">
            <button 
              class="w-full p-6 bg-gradient-to-r from-green-50 to-emerald-50 hover:from-green-100 hover:to-emerald-100 transition-all duration-300 border-b border-gray-200/50"
              @click="toggleAnswer"
            >
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5 text-white transition-transform duration-300" :class="{ 'rotate-180': showAnswer }" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div class="text-left">
                    <h3 class="text-xl font-bold text-gray-900">标准答案</h3>
                    <p class="text-sm text-gray-600">{{ showAnswer ? '点击隐藏答案' : '点击查看答案' }}</p>
                  </div>
                </div>
                <svg class="w-6 h-6 text-gray-500 transition-transform duration-300" :class="{ 'rotate-180': showAnswer }" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
              </div>
            </button>
            
            <div class="transition-all duration-300 overflow-hidden" :class="showAnswer ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'">
              <div class="p-6 bg-gradient-to-br from-green-50/50 to-emerald-50/50">
                <div class="prose prose-lg max-w-none text-gray-900 leading-relaxed prose-headings:text-gray-900 prose-a:text-green-600 prose-strong:text-gray-900 prose-code:text-green-600" v-html="topic.standardAnswer" />
              </div>
            </div>
          </div>
        </div>

        <!-- 审核状态 -->
        <div class="bg-white rounded-2xl border border-gray-200/50 shadow-sm overflow-hidden">
          <div class="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200/50">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
                <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-gray-900">审核状态</h3>
            </div>
          </div>
          
          <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
              <span class="font-semibold text-gray-700">状态:</span>
              <span :class="getReviewStatusClass(topic.reviewStatus)">
                {{ getReviewStatusText(topic.reviewStatus) }}
              </span>
            </div>
            <div v-if="topic.reviewReason" class="p-4 bg-gray-50 rounded-lg">
              <div class="text-sm text-gray-700">
                <span class="font-semibold">审核原因:</span> {{ topic.reviewReason }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="h-full flex items-center justify-center">
      <div class="text-center">
        <div class="w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg class="w-12 h-12 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-2">选择题目</h3>
        <p class="text-gray-600">请从右侧题目列表中选择一个题目开始学习</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TopicWithUser } from '~/types/topic'

interface Props {
  topic: TopicWithUser | null
  loading: boolean
  currentIndex: number
  totalCount: number
}

interface Emits {
  (e: 'previousTopic'): void
  (e: 'nextTopic'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 答案折叠状态
const showAnswer = ref(false)

// 切换答案显示状态
const toggleAnswer = () => {
  showAnswer.value = !showAnswer.value
}

// 监听题目变化，重置答案折叠状态
watch(() => props.topic, () => {
  showAnswer.value = false
})

const getDifficultyClass = (difficulty: string) => {
  switch (difficulty) {
    case '基础':
      return 'text-green-600 bg-green-100 px-2 py-1 rounded text-xs'
    case '中等':
      return 'text-yellow-600 bg-yellow-100 px-2 py-1 rounded text-xs'
    case '困难':
      return 'text-red-600 bg-red-100 px-2 py-1 rounded text-xs'
    default:
      return 'text-gray-600 bg-gray-100 px-2 py-1 rounded text-xs'
  }
}

const getReviewStatusClass = (status: string) => {
  switch (status) {
    case 'approved':
      return 'text-green-600 bg-green-100 px-2 py-1 rounded text-xs'
    case 'pending':
      return 'text-yellow-600 bg-yellow-100 px-2 py-1 rounded text-xs'
    case 'rejected':
      return 'text-red-600 bg-red-100 px-2 py-1 rounded text-xs'
    default:
      return 'text-gray-600 bg-gray-100 px-2 py-1 rounded text-xs'
  }
}

const getReviewStatusText = (status: string) => {
  switch (status) {
    case 'approved':
      return '已通过'
    case 'pending':
      return '待审核'
    case 'rejected':
      return '已拒绝'
    default:
      return '未知状态'
  }
}

const _loading = computed(() => {
  return props.loading
})
</script>
